import React from 'react';
var log = console.log.bind(console)

class InputTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
  }

  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input className="new-todo"
               value={this.state.inputValue}
               onKeyDown={this.handleEnter.bind(this)}
               onChange={this.handleInputChange.bind(this)}
          // onKeyDown={this.handleEnter.bind()}
               placeholder="What needs to be done?"/>
      </header>
    );
  }

  handleEnter(event) {
    if(event.nativeEvent.key === 'Enter') {
      let value = this.state.inputValue
      this.props.enterCallback(value)
      this.setState({
        inputValue: ''
      })
    }
  }

  handleInputChange(event) {

    this.setState({
      inputValue: event.target.value
    })
  }
}

export default InputTodo
